
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Virtual card presentment</title>
</head>
<body onload="init()">
<div>
    <button id="mq-card-pan-copy" style="height: 30px;width: 160px;">Copy card number</button>
    <button id="mq-card-exp-copy" style="height: 30px;width: 160px;">Copy expiration date</button>
    <button id="mq-card-cvv-copy" style="height: 30px;width: 160px;">Copy CVV</button>
</div>
<div id="virtual-card-container" style="margin-top:5%;">
    <div>card number:<div class="container-row" id="mq-card-pan" style="height: 30px"></div></div>
    <div>expiration date:<div class="container-row" id="mq-card-exp" style="height: 30px"></div></div>
    <div>cvv:<div class="container-row" id="mq-card-cvv" style="height: 30px"></div></div>
</div>
<!--<script src="https://widgets-sandbox.marqeta.com/marqetajs/1.1.0/marqeta.min.js" type="text/javascript"></script>-->
<script src="https://widgets.marqeta.com/marqetajs/1.1.0/marqeta.min.js" type="text/javascript"></script>
<script>
    function init(){
        var href = window.location.href;
        var index = href.indexOf("?")
        cardAuthentication = href.substring(index+1);
        showPan("{$token}")
    }
    function showPan(cardAuthentication){
        marqeta.bootstrap({
            clientAccessToken: cardAuthentication,
            integrationType: "custom",
            containerId: "virtual-card-container",
            showPan: {
                cardPan: {
                    domId: 'mq-card-pan',
                    format: true,
                    styles: {
                        "span": {
                            // "background": "green",
                            "color": "black",
                            "font-family": "monospace",
                            "letter-spacing": "2px",
                            "font-weight": "bold"
                        }
                    }
                },
                copyCardPan: {
                    domId: 'mq-card-pan-copy',
                    mode: 'transparent',
                    onCopySuccess: () => alert('Copied PAN Succee!'),
                    onCopyFailure: error =>
                    {
                        console.error(error);
                    }
                },
                cardExp: {
                    domId: "mq-card-exp",
                    format: true,
                    styles: {
                        "span": {
                            // "background": "green",
                            "color": "black",
                            "font-family": "monospace",
                            "letter-spacing": "2px",
                            "font-weight": "bold"
                        }
                    }
                },
                copyCardExp: {
                    domId: 'mq-card-exp-copy',
                    mode: 'transparent',
                    onCopySuccess: () => alert('Copied EXP Succee!'),
                    onCopyFailure: error =>
                    {
                        console.error(error);
                    }
                },
                cardCvv: {
                    domId: "mq-card-cvv",
                    styles: {
                        "span": {
                            // "background": "green",
                            "color": "black",
                            "font-family": "monospace"
                        }
                    }
                },
                copyCardCvv: {
                    domId: 'mq-card-cvv-copy',
                    mode: 'transparent',
                    onCopySuccess: () => alert('Copied CVV Succee!'),
                    onCopyFailure: error =>
                    {
                        console.error(error);
                    }
                },
            },
            callbackEvents: {
                onSuccess: function successMethod() {
                    var copyPan = document.getElementsByName("mq-card-pan-copy")[0];
                    copyPan.style.height = '40px';
                    copyPan.style.width = '165px';
                    var copyExp = document.getElementsByName("mq-card-exp-copy")[0];
                    copyExp.style.height = '40px';
                    copyExp.style.width = '165px';
                    copyExp.style.left = "165px";
                    copyExp.style.border = 1;
                    var copyCvv = document.getElementsByName("mq-card-cvv-copy")[0];
                    copyCvv.style.height = '40px';
                    copyCvv.style.width = '160px';
                    copyCvv.style.left = "340px";
                    copyCvv.style.border = 1;
                    console.log("Success!");
                    copyPan.click();
                },
                onFailure: function failureMethod() {
                    console.log("Failure!");
                }
            }
        });

    }

    // window.onload = function(){

    // function ajaxEventTrigger(event) {
    //     var ajaxEvent = new CustomEvent(event, { detail: this });
    //     window.dispatchEvent(ajaxEvent);
    // }

    // var oldXHR = window.XMLHttpRequest;

    // function newXHR() {
    //     var realXHR = new oldXHR();

    //     realXHR.addEventListener('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false);

    //     realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false);

    //     realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false);

    //     realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false);

    //     realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false);

    //     realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);

    //     realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);

    //     realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);

    //     return realXHR;
    // }

    // window.XMLHttpRequest = newXHR;

    // window.addEventListener('ajaxReadyStateChange', function (e) {
    //     console.log("ajaxReadyStateChange",e.detail); // XMLHttpRequest Object
    // });
    // window.addEventListener('ajaxAbort', function (e) {
    //     console.log("ajaxAbort",e.detail.responseText); // XHR 返回的内容
    // });
    // }



    //         window.addEventListener("message",function(e){
    // 　　　　　  console.log('message--------',e)
    //            console.log('message--------',e.data)
    //            console.log('message--------',e.source)
    //            console.log('message--------',e.origin)
    //         },false)

    //         window.addEventListener("message",function(){
    // 　　　　　  console.log('message--------',e)
    //            console.log('message--------',e.data)
    //            console.log('message--------',e.source)
    //            console.log('message--------',e.origin)
    //         },false)
</script>
</body>
</html>